<template>
  <div class="collect-list">
    <template v-for="item in collectList">
      <div :key="item.id" class="collect-item">
        <div class="left">
          <div>{{`${item.name}:`}}</div>
          <a target="_blank" :href="item.url">{{item.url}}</a>
        </div>
        <div class="right">{{item.created_at}}</div>
      </div>
      
    </template>
  </div>
</template>

<script>
import { getCollectList } from "@/request/collect";
export default {
  data(){
    return {
      collectList: [],
    }
  },
  mounted(){
    this.getCollectList();
  },
  methods:{
    async getCollectList(){
      const res = await getCollectList();
      if(res?.code == 200){
        this.collectList = res?.data || []
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.collect-list {
  width: 100%;
  height: 100%;
  .collect-item{
    margin-bottom: 20px;
    padding: 20px;
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* background: linear-gradient(135deg, #2ce9e9 0%, #07c410 100%); */
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
    border-radius: 10px;

    .left{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      font-size: 1.1rem;
    }
    .right{
      flex: 1;
      font-size: 0.8rem;
      text-align: right;
    }
  }
}
</style>
